<template>
	<view class="page">

		<view class="group_3">
			<text lines="1" class="text_8">校区</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active':index == areaId}" v-for="(item,index) in areaList"
						:key="index" @click="areaSelect(item,index)">
						{{item.venue_name}}
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">培训项目</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active':index == selectId}" v-for="(item,index) in weekList"
						:key="index" @click="timesSelect(item,index)">
						{{item.name}}
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">培训课程</text>
			<view class="item">
				<input type="text" placeholder="请选择培训课程" disabled v-model="userInfo.occupation_relation"
					@click="showoccupation = true" class="atinput" />
			</view>
			<u-picker :show="showoccupation" :columns="occupation_status" keyName="course_name" @confirm="addoccupation"
				style="font-size: 20rpx;" @cancel="showoccupation = false">
			</u-picker>

			<text lines="1" class="text_8">选择课包</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active': jiaoSelect.includes(item.item_id)}"
						v-for="item in coursePackageList" :key="item.item_id" @click="handjiao(item)">
						{{ item.name }}
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">选择教练</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active': coachSelect.includes(item.id)}" v-for="item in coachList"
						:key="item.id" @click="handcoach(item)">
						{{ item.coach_name }}
					</view>
				</view>
			</view>

			<text lines="1" class="text_8">班级类型</text>
			<view class="item">
				<view class=" week-list flex-wrap">
					<view class="week-item" :class="{'active':index == trainId}" v-for="(item,index) in trainEnumList"
						:key="index" @click="trainSelect(item,index)">
						{{item.enum_name}}
					</view>
				</view>
			</view>

			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">培训班名称</text>
				<view class="item">
					<input type="text" placeholder=" 请输入培训班名称" class="atinput" v-model="name"
						style="width: 400rpx;text-align: right;" />
				</view>
			</view>
			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">招生公告</text>
				<view class="item">
					<input type="text" placeholder=" 请输入招生公告" class="atinput" v-model="day_limit"
						style="width: 400rpx;text-align: right;" />
				</view>
			</view>

			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">字段采集分类 </text>
				<view class="item">
					<input type="text" placeholder="请字段采集分类 " disabled v-model="userInfo.occupation_ziduancaoji"
						class="atinput" style="width: 400rpx;text-align: right;" @click="showoziduancaoji = true" />
				</view>

			</view>
			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">协议须知</text>
				<view class="item">
					<input type="text" placeholder="请协议须知 " disabled v-model="userInfo.occupation_xieyixuzhi"
						class="atinput" style="width: 400rpx;text-align: right;" @click="showjineng = true" />
				</view>
			</view>

			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">展示开始日期</text>
				<view class="item">
					<input type="text" placeholder="请输入展示开始日期 " disabled v-model="datatime1" class="atinput"
						style="width: 400rpx;text-align: right;" @click="show1 = true" />
				</view>
			</view>

			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">展示结束日期</text>
				<view class="item">
					<input type="text" placeholder="请输入展示结束日期 " disabled v-model="datatime2" class="atinput"
						style="width: 400rpx;text-align: right;" @click="show2 = true" />
				</view>
			</view>

			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">支付等待时间</text>
				<view class="item">
					<input type="text" placeholder="请输入支付等待时间 " disabled v-model="datatime3" class="atinput"
						style="width: 400rpx;text-align: right;" @click="show3 = true" />
				</view>
			</view>

			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">单人限制报名数量</text>
				<view class="item">
					<input type="text" placeholder="请输入单人限制报名数量" v-model="quantity" class="atinput"
						style="width: 400rpx;text-align: right;" />
				</view>
			</view>


			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">自动创班</text>
				<view class="item">
					<u-switch v-model="value22" @change="change22"></u-switch>
				</view>
			</view>

			<view class="d-flex flex-row justify-space-between" style="align-items: center;">
				<text lines="1" class="text_8">签到即消</text>
				<view class="item">
					<u-switch v-model="value33" @change="change33"></u-switch>
				</view>
			</view>

			<text lines="1" class="text_8">培训封面图片</text>
			<view class="item">
				<u-upload :fileList="fileList1" name="1" @afterRead="afterRead" @delete="deletePic" multiple
					:maxCount="1">
				</u-upload>
			</view>

			<text lines="1" class="text_8">培训轮播图片</text>
			<view class="item">
				<van-uploader @delete="deleteImg5" :deletable="true" :fileList="fileList5" @after-read="afterRead5"
					max-count="9" />
			</view>


			<text lines="1" class="text_8">培训简介</text>
			<view class="item">
				<u-textarea v-model="remark" placeholder="请输入培训简介" maxlength='-1'></u-textarea>
			</view>

			<text lines="1" class="text_8">培训详情</text>
			<view class="item">
				<u-textarea v-model="content" placeholder="请输入培训详情" maxlength='-1'></u-textarea>
			</view>

			<!-- 分组 1 -->
			<view class=""  style="margin-top: 20rpx;padding: 0 10rpx;">
				<u-row>
					<u-col :span="4">
						<view class="" style="font-size: 26rpx;">
							规格分组 1
						</view>
					</u-col>
					<u-col :span="5">
						<u-input v-model="group1" style="width: 150rpx;" @input="changeGroup(1)"></u-input>
					</u-col>
					<u-col :span="1" style="text-align: left;">
						<u-checkbox shape='circle' :checked="filters.open_group1" @change="changeOpen(1)"
							:disabled="train_course==''"></u-checkbox>
					</u-col>
					<u-col :span="1" style="text-align: right;">
						<u-button type="primary" size="mini" @click="addSku(1)" :disabled="!filters.open_group1"
							style="width: 150rpx;">
							增加
						</u-button>
					</u-col>
				</u-row>
			</view>
			<view class="" style="margin-top: 20rpx;padding: 0 10rpx;">
				<u-row v-show="filters.open_group1">
					<u-col :span="4">
						<view class="" style="font-size: 26rpx;">
							默认分组 1 规格
						</view>
					</u-col>
					<u-col :span="5">
						<view v-for="(input, index) in group1SkuList" :key="index" class="input-group">
							<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
								@input="changeSku(1)"></u-input>
							<view class="" @click="removeInput(index, 1)">
								删除
							</view>
						</view>
					</u-col>
				</u-row>
			</view>

			<!-- 分组 2 -->
			<view class="" style="margin-top: 20rpx;padding: 0 10rpx;">
				<u-row>
					<u-col :span="4">
						<view class="" style="font-size: 26rpx;">
							规格分组 2
						</view>
					</u-col>
					<u-col :span="5">
						<u-input v-model="group2" style="width: 150rpx;" @input="changeGroup(2)"></u-input>
					</u-col>
					<u-col :span="1" style="text-align: left;">
						<u-checkbox shape='circle' :checked="filters.open_group2" @change="changeOpen(2)"
							:disabled="train_course==''"></u-checkbox>
					</u-col>
					<u-col :span="1" style="text-align: right;">
						<u-button type="primary" size="mini" @click="addSku(2)" :disabled="!filters.open_group2">
							增加
						</u-button>
					</u-col>
				</u-row>
			</view>
			<view class="" style="margin-top: 20rpx;padding: 0 10rpx;">
				<u-row v-show="filters.open_group2">
					<u-col :span="4">
						<view class="" style="font-size: 26rpx;">
							默认分组 2 规格
						</view>
					</u-col>
					<u-col :span="5">
						<view v-for="(input, index) in group2SkuList" :key="index" class="input-group">
							<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
								@input="changeSku(2)"></u-input>
							<view class="" @click="removeInput(index, 2)">
								删除
							</view>
						</view>
					</u-col>
				</u-row>
			</view>

			<!-- 分组 3 -->
			<view class="" style="margin-top: 20rpx;padding: 0 10rpx;">
				<u-row>
					<u-col :span="4">
						<view class="" style="font-size: 26rpx;">
							规格分组 3
						</view>
					</u-col>
					<u-col :span="5">
						<u-input v-model="group3" style="width: 150rpx;" @input="changeGroup(3)"></u-input>
					</u-col>
					<u-col :span="1" style="text-align: left;">
						<u-checkbox shape='circle' :checked="filters.open_group3" @change="changeOpen(3)"
							:disabled="train_course==''"></u-checkbox>
					</u-col>
					<u-col :span="1" style="text-align: right;">
						<u-button type="primary" size="mini" @click="addSku(3)" :disabled="!filters.open_group3">
							增加
						</u-button>
					</u-col>
				</u-row>
			</view>
			<view class="" style="margin-top: 20rpx;padding: 0 10rpx;">
				<u-row v-show="filters.open_group3">
					<u-col :span="4">
						<view class="" style="font-size: 26rpx;">
							默认分组 3 规格
						</view>
					</u-col>
					<u-col :span="5">
						<view v-for="(input, index) in group3SkuList" :key="index" class="input-group">
							<u-input v-model="input.value" placeholder="请输入内容" style="width: 120rpx;"
								@input="changeSku(3)"></u-input>
							<view class="" @click="removeInput(index, 3)">
								删除
							</view>
						</view>
					</u-col>
				</u-row>
			</view>

			<!-- 数据展示区域 -->
			<view class="data-display">
				<view v-for="(row, rowIndex) in tableData" :key="rowIndex" class="data-row">
					<view class="data-cell" v-for="(column, colIndex) in columns" :key="colIndex">
						<view class="label">{{ column.label }}</view>
						<view class="input-container">
							<input v-if="column.type == 'text'" v-model="row[column.prop]" :disabled="column.disable" />
							<input v-else-if="column.type === 'number'" v-model.number="row[column.prop]" type="number"
								:controls="true" :min="0" :step="1" style="width: 90px;" :disabled="column.disable" />
							<!-- 复选框（状态字段） -->
							<u-checkbox v-else-if="column.type === 'checkbox'" shape="circle" v-model="row[column.prop]"
								:checked="column.checked || false" :disabled="column.disable" style="margin-left: 0;"
								@change="handleCheckboxChange(rowIndex, column.prop)" />
							<input type="text" :value="formatTimestamp(row[column.prop])" placeholder="选择日期"
								v-else-if="column.type === 'date'"
								style="width: 180rpx; border: 1rpx solid #d9d9d9; border-radius: 4rpx; padding: 0 10rpx;"
								@click="showDatePicker(rowIndex, column.prop)"
								@input="handleDateInput(rowIndex, column.prop, $event.target.value)" />
							<!-- 优化后的日期选择器（统一使用 v-model 绑定时间戳，简化事件处理） -->
							<u-datetime-picker :show="row[`show${column.prop}Picker`]" v-model="row[column.prop]"
								mode="date" @confirm="(value) => handleDateConfirm(rowIndex, column.prop, value)"
								@cancel="hideDatePicker(rowIndex, column.prop)" :minDate="minDate" :maxDate="maxDate" />
						</view>
					</view>
				</view>
			</view>

			<view class="" style="width: 100%;height: 12vh;"></view>
		</view>
		<view class="d-flex flex-row justify-space-between justify-center align-center"
			style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 6%;z-index: 99;">
			<view class="" @click="handleCreate"
				style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;line-height: 80rpx;border-radius: 35rpx;">
				确定创建
			</view>
		</view>

		<u-picker :show="showoziduancaoji" :columns="occupation_zicaoji" keyName="name" @confirm="addziduancaoji"
			@cancel="showoziduancaoji = false">
		</u-picker>

		<u-picker :show="showjineng" :columns="jineng_status" keyName="title" @confirm="addjineng"
			@cancel="showjineng = false">
		</u-picker>

		<u-datetime-picker :show="show1" v-model="value1" mode="date" @confirm="timelist1" :minDate="-845628841"
			:maxDate="2856778555000" @cancel="show1 = false"></u-datetime-picker>
		<u-datetime-picker :show="show2" v-model="value2" mode="date" @confirm="timelist2" :minDate="-845628841"
			:maxDate="2856778555000" @cancel="show2 = false"></u-datetime-picker>
		<u-datetime-picker :show="show3" v-model="value3" mode="time" :minute-step="1" @confirm="timelist3"
			@cancel="show3 = false"></u-datetime-picker>
	</view>

</template>

<script>
	/**
	 * @desc 生成唯一值
	 * @returns {string}
	 */
	const generateUnique13DigitNumber = () => {
		const now = Date.now(); // 获取当前时间戳（毫秒）
		const randomPart = Math.floor(Math.random() * 1000); // 生成一个0到999之间的随机数
		const uniqueNumber = Math.floor((now % 1000000000000) + randomPart); // 取时间戳的后12位并加上随机数的前几位，确保是13位

		return 'S' + uniqueNumber;
	}
	const venues = require("@/api/venues/venues.js");
	const train = require("@/api/train/index.js");
	export default {
		data() {
			const twoDaysAgo = new Date();
			twoDaysAgo.setDate(twoDaysAgo.getDate() - 2);
			const today = new Date();
			const year = today.getFullYear();
			const month = String(today.getMonth() + 1).padStart(2, '0');
			const day = String(today.getDate()).padStart(2, '0');
			const todayDate = `${year}-${month}-${day}`;
			return {
				fileList1: [],
				url_phone: '',
				fileList: [], //图片列表
				showoccupation: false, //职业
				occupation_status: [], //职业
				occupation_list: [],
				showoziduancaoji: false,
				showjineng: false,
				jineng_status: [],
				occupation_zicaoji: [],
				userInfo: {
					occupation_relation: '',
					occupation_relation_id: '',
					occupation_jineng: '',
					occupation_jineng_id: '',
					occupation_changguan: "",
					occupation_changguan_id: "",
					occupation_xcx: '',
					occupation_xcx_id: '',
					occupation_ziduancaoji: '',
					occupation_ziduancaoji_id: '',
					occupation_xieyixuzhi: '',
					occupation_xieyixuzhi_id: '',
				},
				weekSelect: [], //选中的
				weekList: [],
				areaList: [],
				pid: '',
				remark: '',
				selectId: 0,
				name: '',
				students: '',
				project: '',
				area: '',
				floor: '',
				remark: '',
				id: '',
				venue_id: '',
				coursePackageList: [],
				jiaoSelect: [], //选中的
				coachList: [],
				coachSelect: [],
				areaId: 0,
				area_Id: '',
				trainEnumList: [],
				trainId: 0,
				train_Id: '',
				group1: '分组 1',
				group2: '分组 2',
				group3: '分组 3',
				filters: {
					open_group1: false,
					open_group2: false,
					open_group3: false,
					train_course: '模拟课程ID'
				},
				group1SkuList: [],
				group2SkuList: [],
				group3SkuList: [],
				columns: [],
				tableData: [],
				currentCalendarVisible: false, // 当前显示的日历状态
				currentRow: null, // 当前操作的行数据
				currentProp: '', // 当前操作的日期字段（sign_start/sign_end）
				mode: 'single', // 日历模式（默认日期选择）
				coachSelect: [],
				coach_idsSelect: [],
				mode: 'single', // 日历模式（默认日期选择）
				minDate: new Date('2025-01-01').getTime(), // 示例最小日期
				maxDate: new Date('2050-01-01').getTime(), // 示例最大日期
				tableData: [],
				fileList5: [],
				url_phone: '',
				fileList: [], //图片列表
				value22: false,
				value33: false,
				show1: false,
				value1: Number(new Date()),
				datatime1: '',
				show2: false,
				value2: Number(new Date()),
				datatime2: '',
				show3: false,
				value3: Number(new Date()),
				datatime3: '',
				remark: '',
				content: '',
				name: '',
				quantity: '',
				train_course: '',
				train_enum_id: ''
			}
		},
		onLoad(options) {
			this.venue_id = options.venue_id
			this.course_config()
		},
		methods: {
			timelist1(value) {
				this.show1 = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.datatime1 = y + '-' + MM + '-' + d
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			timelist2(value) {
				console.log(value, 'value')
				this.show2 = false
				let date = new Date(value.value);
				//时间戳为10位需*1000，时间戳为13位的话不需乘1000
				let y = date.getFullYear();
				let MM = date.getMonth() + 1;
				MM = MM < 10 ? ('0' + MM) : MM; //月补0
				let d = date.getDate();
				d = d < 10 ? ('0' + d) : d; //天补0
				let h = date.getHours();
				h = h < 10 ? ('0' + h) : h; //小时补0
				let m = date.getMinutes();
				m = m < 10 ? ('0' + m) : m; //分钟补0
				let s = date.getSeconds();
				s = s < 10 ? ('0' + s) : s; //秒补0
				console.log(y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s)
				this.datatime2 = y + '-' + MM + '-' + d
				return y + '-' + MM + '-' + d; //年月日
				return y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s; //年月日时分秒
			},
			timelist3(e) {
				console.log(e, 'e')
				this.datatime3 = e.value
				this.show3 = false;
			},
			change22(e) {
				console.log('change', e);
			},
			change33(e) {
				console.log('change', e);
			},
			afterRead5(event) {
				let that = this
				const {
					file
				} = event.detail;
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				wx.uploadFile({
					url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
					filePath: file.url,
					name: 'file',
					formData: {
						// user: 'test',
						project_id: getApp().globalData.projectId,
						app_id: this.$https.weixinAppId,
						user: 'test',
					},
					success(res) {
						// 上传完成需要更新 fileList
						let result = JSON.parse(res.data);
						const fileList = that.fileList5 || [];
						fileList.push({
							...file,
							url: result.data.url,
						});
						that.fileList5 = fileList;
					},
				});
			},
			deleteImg5(event) {
				const index = event.detail.index;
				this.fileList5.splice(index, 1);
				// this.fileList.splice(event.detail, 1);
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: this.url_phone
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://sass-test.doit10019.com/api/upload/uploadOneImage', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							// user: 'test',
							project_id: getApp().globalData.projectId,
							app_id: this.$https.weixinAppId,

						},
						success: (res) => {
							let result = JSON.parse(res.data);
							this.url_phone = result.data.url
							setTimeout(() => {
								resolve(this.url_phone)
							}, 1000)
						}
					});
				})
			},
			// 初始化行数据时添加 showXXPicker 字段
			addTableData() {
				this.tableData = [{
					enroll_start: '',
					enroll_end: '',
					showEnrollStartPicker: false, // 对应 enroll_start 的弹窗状态
					showEnrollEndPicker: false // 对应 enroll_end 的弹窗状态
				}];
			},
			// 显示日期选择器（简化字段名生成，直接使用 prop 拼接）
			showDatePicker(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], `show${prop}Picker`, true);
				console.log(3333)
			},

			// 确认选择时处理（直接使用 value 作为时间戳，移除多余的 propCapitalize）
			handleDateConfirm(rowIndex, prop, value) {
				console.log('rowIndex:', rowIndex);
				console.log('prop:', prop);
				console.log('value 的值:', value);
				try {
					const timestamp = new Date(value).getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
					const pickerProp = `show${prop}Picker`;
					this.$set(this.tableData[rowIndex], pickerProp, false);
				} catch (error) {
					console.error('日期解析出错:', error);
				}
			},

			// 取消选择时处理（直接隐藏弹窗，无需操作时间戳）
			hideDatePicker(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], `show${prop}Picker`, false);
				console.log(2222)
			},

			// 时间戳格式化（保留原有逻辑，但统一输出格式）
			formatTimestamp(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const y = date.getFullYear();
				const MM = String(date.getMonth() + 1).padStart(2, '0');
				const d = String(date.getDate()).padStart(2, '0');
				const h = String(date.getHours()).padStart(2, '0');
				const m = String(date.getMinutes()).padStart(2, '0');
				const s = String(date.getSeconds()).padStart(2, '0');
				return `${y}-${MM}-${d} ${h}:${m}:${s}`; // 统一输出带时分秒的格式
			},

			// 手动输入日期时处理（兼容用户输入的不同格式）
			handleDateInput(rowIndex, prop, inputValue) {
				const date = new Date(inputValue.replace(/-/g, '/')); // 转换 '-' 为 '/' 兼容解析
				if (!isNaN(date.getTime())) {
					this.$set(this.tableData[rowIndex], prop, date.getTime());
				}
			},
			// 处理输入框手动输入日期
			handleDateInput(rowIndex, prop, inputValue) {
				const date = new Date(inputValue);
				if (!isNaN(date.getTime())) {
					const timestamp = date.getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
				}
			},
			// 将时间戳转换为日期格式
			formatTimestamp(timestamp) {
				if (!timestamp) return '';
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			// 处理输入框手动输入日期
			handleDateInput(rowIndex, prop, inputValue) {
				const date = new Date(inputValue);
				if (!isNaN(date.getTime())) {
					const timestamp = date.getTime();
					this.$set(this.tableData[rowIndex], prop, timestamp);
				}
			},
			// 处理复选框状态改变
			handleCheckboxChange(rowIndex, prop) {
				this.$set(this.tableData[rowIndex], prop, !this.tableData[rowIndex][prop]);
			},
			async handleCreate() {
				// 深拷贝 tableData，避免修改原始数据
				const skuData = JSON.parse(JSON.stringify(this.tableData));

				// 遍历 skuData 中的每一行数据
				skuData.forEach(row => {
					// 检查是否存在 enroll_start 和 enroll_end 字段
					if (row.enroll_start) {
						row.enroll_start = this.formatTimestamp(row.enroll_start);
					}
					if (row.enroll_end) {
						row.enroll_end = this.formatTimestamp(row.enroll_end);
					}
				});
				console.log(this.fileList5, 'that.fileList5')
				const urls = this.fileList5.map(item => ({
					url: item.url
				}));
				console.log(this.coach_idsSelect, 'this.coach_idsSelect');
				// 收集需要的参数
				const params = {
					auto_create_class: this.value22,
					cateids: this.cateids,
					coach_ids: this.coach_idsSelect.map(id => `${id}`), // 教练 ID 数组（如 ["354"]）
					content: this.content,
					course_ids: this.userInfo.occupation_relation_id,
					course_item_ids: this.jiaoSelect, // 选中的课包 item_id 数组
					course_types: [],
					display_end: this.datatime2,
					display_start: this.datatime1,
					field_collect_id: this.userInfo.occupation_ziduancaoji_id,
					group1: this.group1,
					group1SkuList: this.group1SkuList,
					group2: this.group2,
					group2SkuList: this.group2SkuList,
					group3: this.group3,
					group3SkuList: this.group3SkuList,
					name: this.name,
					open_group1: this.filters.open_group1,
					open_group2: this.filters.open_group2,
					open_group3: this.filters.open_group3,
					pay_wait_time: this.datatime3,
					picture: this.url_phone,
					policy_id: this.userInfo.occupation_xieyixuzhi_id,
					quantity: this.quantity,
					remark: this.remark,
					selling_price: this.course_price,
					sign_auto_consume: this.value33,
					sku_data: skuData, // 核心数据：使用转换后的 skuData
					slider: [],
					slider_pictures: urls,
					train_course: this.train_course,
					train_enum_id: this.train_enum_id,
					venue_id:this.venue_id,
					area_id:this.area_id,
					enroll_notice:this.day_limit
				};
				// 打印数据到控制台
				console.log('确认创建参数:', params);

				let res = await train.train_save(params);
				if (res.code === 1) {
					uni.showToast({
						title: res.info,
						icon: 'none'
					})
					setTimeout(() => {
						uni.navigateBack({
							delta: 1 // 返回上一页面，如果页面栈中只有一个页面则该方法不会生效
						});
					}, 1000)
				} else {
					uni.showToast({
						title: res.info,
						icon: 'none'
					})
				}
			},
			handjiao(item) {
				this.course_price = item.course_price
				let data = item.item_id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.jiaoSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.jiaoSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.jiaoSelect.push(data);
				}
				this.addTableData();
				this.updateColumns(); // 点击后更新columns
			},
			handcoach(item) {
				console.log(item, 'item')
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.coachSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.coachSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.coachSelect.push(data);
				}
				console.log(this.coachSelect, 'coachSelect')



				let coach_data = item.coach_pin;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const coach_ids11 = this.coach_idsSelect.indexOf(coach_data);
				if (coach_ids11 > -1) {
					// 如果已选中，则移除
					this.coach_idsSelect.splice(coach_ids11, 1);
				} else {
					// 如果未选中，则添加
					this.coach_idsSelect.push(coach_data);
				}
				console.log(this.coach_idsSelect, 'coach_idsSelect')
				this.addTableData();
				this.updateColumns(); // 点击后更新columns
			},
			async trainoptions() {
				let params = {
					venue_id: [this.venue_id, this.area_id]
				};
				let res = await train.trainoptions(params);
				if (res.code === 1) {
					this.occupation_status.push(
						res.data.courseList
					)
					this.occupation_zicaoji.push(
						res.data.fieldCollectList
					)
					this.jineng_status.push(
						res.data.policyList
					)
					this.trainEnumList = res.data.trainEnumList
					this.train_enum_id = res.data.trainEnumList[0].id
				}
			},
			// 职业
			addoccupation(e) {
				this.userInfo.occupation_relation = e.value[0].course_name
				this.userInfo.occupation_relation_id = e.value[0].r_id
				this.train_course = e.value[0].id
				this.showoccupation = false
				this.venue_areas()
			},
			addziduancaoji(e) {
				this.userInfo.occupation_ziduancaoji = e.value[0].name
				this.userInfo.occupation_ziduancaoji_id = e.value[0].id
				this.showoziduancaoji = false
			},
			addjineng(e) {
				this.userInfo.occupation_xieyixuzhi = e.value[0].title
				this.userInfo.occupation_xieyixuzhi_id = e.value[0].id
				this.showjineng = false
			},
			async venue_areas() {
				let params = {
					venue_id: this.venue_id,
					course_id: this.userInfo.occupation_relation_id,
					area_id:this.area_id
				};
				let res = await train.venue_areas(params);
				if (res.code === 1) {
					this.coursePackageList = res.data.coursePackageList
					this.coachList = res.data.coachList
				}
			},
			async course_config() {
				let params = {
					venue_id: this.venue_id
				};
				let res = await train.course_config(params);
				if (res.code === 1) {
					this.weekList = res.data.projectList
					this.areaList = res.data.areaList
					this.area_id = res.data.areaList[0].id
					this.cateids = res.data.projectList[0].id
					console.log(this.area_id, 'this.area_id')
					this.trainoptions()
				}
			},
			timesSelect(item, index) {
				this.selectId = index
				this.cateids = item.id
			},
			areaSelect(item, index) {
				this.areaId = index
				this.area_id = item.id
			},
			trainSelect(item, index) {
				this.trainId = index
				this.train_id = item.id
				this.train_enum_id = item.id
			},
			handSelect(item) {
				let data = item.id;
				// 使用indexOf检查是否已选中，避免重复或遗漏
				const index = this.weekSelect.indexOf(data);
				if (index > -1) {
					// 如果已选中，则移除
					this.weekSelect.splice(index, 1);
				} else {
					// 如果未选中，则添加
					this.weekSelect.push(data);
				}
			},
			changeGroup(num) {
				if (num === 1 && this.group1) {
					this.columns.find(col => col.prop === 'group1') && (this.columns.find(col => col.prop ===
							'group1')
						.label = this.group1);
				} else if (num === 2 && this.group2) {
					this.columns.find(col => col.prop === 'group2') && (this.columns.find(col => col.prop ===
							'group2')
						.label = this.group2);
				} else if (num === 3 && this.group3) {
					this.columns.find(col => col.prop === 'group3') && (this.columns.find(col => col.prop ===
							'group3')
						.label = this.group3);
				}
				this.addTableData();
				this.updateColumns(); // 点击后更新columns
			},
			changeOpen(type) {
				if (!this.train_course) {
					uni.showToast({
						title: '请先选择课程！',
						icon: 'none'
					});
					this.filters[`open_group${type}`] = false;
					return;
				}
				this.filters[`open_group${type}`] = !this.filters[`open_group${type}`];
				const skuList = this[`group${type}SkuList`];
				if (this.filters[`open_group${type}`]) {
					skuList.push({
						value: `规格1`
					});
				} else {
					this[`group${type}SkuList`] = [];
				}
				this.updateColumns();
				this.addTableData();
			},
			addSku(type) {
				const list = this[`group${type}SkuList`];
				const length = list.length + 1;
				list.push({
					value: `规格${length}`
				});
				this.addTableData();
			},
			removeInput(index, type) {
				const list = this[`group${type}SkuList`];
				list.splice(index, 1);
				if (list.length === 0) {
					this.filters[`open_group${type}`] = false;
					this.updateColumns();
					this.addTableData();
				} else {
					this.addTableData();
				}
			},
			changeSku(type) {
				this.addTableData();
			},
			addTableData() {
				this.tableData = [];
				const selectedCoursePackages = this.coursePackageList.filter(item => this.jiaoSelect.includes(item
					.item_id));
				const selectedCoaches = this.coachList.filter(item => this.coachSelect.includes(item.id));
				const group1Data = this.group1SkuList.map(item => item.value);
				const group2Data = this.group2SkuList.map(item => item.value);
				const group3Data = this.group3SkuList.map(item => item.value);

				// 定义维度类型与数据的映射
				const dimensions = [{
						type: 'coursePackage',
						data: selectedCoursePackages
					},
					{
						type: 'coach',
						data: selectedCoaches
					},
					{
						type: 'group1',
						data: group1Data
					},
					{
						type: 'group2',
						data: group2Data
					},
					{
						type: 'group3',
						data: group3Data
					},
				].filter(d => d.data.length > 0); // 过滤空维度

				// 计算笛卡尔积
				const cartesianProduct = (arrays) => {
					return arrays.reduce((acc, curr) => {
						const newAcc = [];
						acc.forEach(a => curr.data.forEach(c => newAcc.push([...a, {
							type: curr.type,
							value: c
						}])));
						return newAcc.length ? newAcc : curr.data.map(c => [{
							type: curr.type,
							value: c
						}]);
					}, []);
				};

				const combinations = cartesianProduct(dimensions);
				const currentTimestamp = new Date().getTime(); // 获取当前时间的时间戳
				// 创建当前日期对象
				const currentDate = new Date(currentTimestamp);

				// 设置为当前日期 + 7 天
				currentDate.setDate(currentDate.getDate() + 7);
				combinations.forEach(combination => {
					const row = {
						area_id: '', // 新增字段
						coach_id: '',
						coach_name: '',
						hour_num: '',
						time_long: '',
						goods_sku: generateUnique13DigitNumber(),
						line_price: '',
						package_id: '', // 新增字段
						selling_price: '',
						stock: '',
						student_num: '',
						enroll_start: currentTimestamp, // 初始化为当前时间戳
						enroll_end: currentDate.setDate(currentDate.getDate() + 7), // 初始化为当前时间戳
						sku_status: true,
						group1: '',
						group2: '',
						group3: '',
						// showEnrollStartPicker: false,
						// showEnrollEndPicker: false
					};

					combination.forEach(item => {
						switch (item.type) {
							case 'coursePackage':
								row.hour_num = item.value.hour_num;
								row.line_price = item.value.course_price;
								row.selling_price = item.value.course_price;
								row.hour_num_period = `${item.value.hour_num}/0`;
								const itemIdParts = item.value.item_id.split('-');
								if (itemIdParts.length >= 5) {
									row.package_id = itemIdParts[0]; // 第一个部分为 package_id
									row.area_id = itemIdParts[4]; // 第五个部分为 area_id
									row.time_long = itemIdParts[3]
								}
								break;
							case 'coach':
								row.coach_id = item.value.id;
								row.coach_name = item.value.coach_name;
								break;
							case 'group1':
								row.group1 = item.value; // 直接赋值分组1规格
								break;
							case 'group2':
								row.group2 = item.value; // 直接赋值分组2规格
								break;
							case 'group3':
								row.group3 = item.value; // 直接赋值分组3规格
								break;
						}
					});

					this.tableData.push(row);
				});
			},
			updateColumns() {
				const newColumns = [];
				if (this.filters.open_group1) {
					newColumns.push({
						prop: 'group1',
						label: this.group1,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				if (this.filters.open_group2) {
					newColumns.push({
						prop: 'group2',
						label: this.group2,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				if (this.filters.open_group3) {
					newColumns.push({
						prop: 'group3',
						label: this.group3,
						type: 'text',
						width: '120rpx',
						disable: true
					});
				}
				newColumns.push({
					prop: 'goods_sku',
					label: '培训班SKU',
					type: 'text',
					disable: true
				}, {
					prop: 'coach_name',
					label: '教练',
					type: 'text',
					disable: true
				}, {
					prop: 'hour_num',
					label: '课时数/有效期',
					type: 'text',
					disable: true
				}, {
					prop: 'line_price',
					label: '套餐价',
					type: 'number',
					disable: true
				}, {
					prop: 'selling_price',
					label: '报名价',
					type: 'number',
					disable: false
				}, {
					prop: 'stock',
					label: '名额',
					type: 'number',
					disable: false
				}, {
					prop: 'student_num',
					label: '单班人数',
					type: 'number',
					disable: false
				}, {
					prop: 'enroll_start',
					label: '报名开始日期',
					type: 'date',
					disable: false
				}, {
					prop: 'enroll_end',
					label: '报名结束日期',
					type: 'date',
					disable: false
				}, {
					prop: 'sku_status',
					label: '状态',
					type: 'checkbox',
					disable: false,
					checked: true
				});
				this.columns = newColumns;
			},
			handleDateChange(row, prop, e) {
				row[prop] = e;
			},
			confirm(e) {
				this.datalist = e
				this.show = false
				console.log(e.length);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		// height: 100vh;
		background-color: #EDF5F5;

		.group_3 {
			background-color: rgba(255, 255, 255, 1.000000);
			width: 710rpx;
			height: 100%;
			display: flex;
			flex-direction: column;
			margin: 20rpx 0 0 20rpx;

			.item {
				// padding: 29rpx 30rpx 30rpx;
				padding: 25rpx 30rpx 20rpx 30rpx;

				.atinput {
					// border: #EBECEE 1rpx solid;
					font-size: 24rpx;
					height: 60rpx;
					width: 100%;
					padding-left: 20rpx;
				}

				.item-title {
					color: rgb(153, 153, 153);
					font-size: 28rpx;
					font-weight: 500;
					margin-bottom: 20rpx;
				}

				.value {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
				}

				.time-cell {
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;
					justify-content: flex-start;

					.time {
						width: 49%;

						&:last-of-type {
							margin-left: 20rpx;
						}
					}
				}

				.week-list {
					// display: grid;
					// grid-template-columns: repeat(5, 1fr);
					// grid-gap: 20rpx;
					// position: relative;
					flex-direction: row;
					width: 650rpx;
					font-size: 24rpx;
					flex-wrap: wrap;
					display: flex;

					.week-item {
						padding: 15rpx 0;
						background-color: rgb(243, 243, 243);
						border-radius: 5rpx;
						text-align: center;
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						font-weight: 500;
						border: solid 2rpx transparent;
						box-sizing: border-box;
						padding: 6rpx 12rpx;
						margin-top: 20rpx;
						margin-right: 20rpx;
					}

					.active {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;

						// &:before {
						// 	display: block;
						// 	content: '';
						// 	position: absolute;
						// 	width: 27rpx;
						// 	height: 28rpx;
						// 	right: -2rpx;
						// 	bottom: -2rpx;
						// 	background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						// 	background-repeat: no-repeat;
						// 	background-size: 100%;
						// }
					}

					.active1 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.active2 {
						color: rgba(255, 98, 0, 1);
						background-color: rgba(255, 65, 5, 0.1);
						// border: solid 2rpx rgb(99, 93, 247);
						position: relative;
					}

					.check {
						color: rgb(51, 51, 51);
						font-size: 24rpx;
						position: absolute;
						bottom: 10rpx;
						right: 0;
					}
				}
			}
		}

		.text_2 {
			width: 93rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 15rpx 0 0 21rpx;
		}

		.section_2 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_3 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 42rpx 0 0 19rpx;
		}

		.text_4 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_3 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_5 {
			width: 47rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.text_6 {
			width: 82rpx;
			height: 26rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 24rpx 0 0 20rpx;
		}

		.section_4 {
			background-color: rgba(229, 229, 229, 1.000000);
			width: 672rpx;
			height: 1rpx;
			display: flex;
			flex-direction: column;
			margin: 40rpx 0 0 18rpx;
		}

		.text_7 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 39rpx 0 0 19rpx;
		}

		.image_2 {
			width: 151rpx;
			height: 151rpx;
			margin: 25rpx 0 0 18rpx;
		}


		.text_8 {
			width: 95rpx;
			height: 23rpx;
			overflow-wrap: break-word;
			color: rgba(136, 136, 136, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 20rpx 0 0 19rpx;
		}

		.section_6 {
			width: 378rpx;
			height: 62rpx;
			flex-direction: row;
			display: flex;
			justify-content: space-between;
			margin: 26rpx 0 27rpx 21rpx;
		}

		.button_1 {
			background-color: rgba(243, 243, 243, 1.000000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_9 {
			width: 48rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(51, 51, 51, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 63rpx;
		}

		.button_2 {
			background-color: rgba(255, 65, 5, 0.100000);
			height: 62rpx;
			display: flex;
			flex-direction: column;
			width: 174rpx;
		}

		.text_10 {
			width: 73rpx;
			height: 24rpx;
			overflow-wrap: break-word;
			color: rgba(255, 98, 0, 1);
			font-size: 24rpx;
			font-family: PingFang-SC-Medium;
			font-weight: 500;
			text-align: left;
			white-space: nowrap;
			line-height: 34rpx;
			margin: 19rpx 0 0 51rpx;
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: fixed;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: #fff;
			font-size: 28rpx;
			z-index: 999;
		}
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
	}

	.u-input {
		margin-right: 10rpx;
	}

	.u-icon {
		cursor: pointer;
	}

	.week-list {
		flex-direction: row;
		width: 100%;
		font-size: 24rpx;
		flex-wrap: wrap;
		display: flex;

		.week-item {
			padding: 15rpx 0;
			background-color: rgb(243, 243, 243);
			border-radius: 5rpx;
			text-align: center;
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			font-weight: 500;
			border: solid 2rpx transparent;
			box-sizing: border-box;
			padding: 6rpx 12rpx;
			margin-top: 20rpx;
			margin-right: 20rpx;
		}

		.active {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.active1 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.active2 {
			color: rgba(255, 98, 0, 1);
			background-color: rgba(255, 65, 5, 0.1);
			position: relative;
		}

		.check {
			color: rgb(51, 51, 51);
			font-size: 24rpx;
			position: absolute;
			bottom: 10rpx;
			right: 0;
		}

		table {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		thead {
			width: 100%;
		}

		tbody {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
		}

		tr {
			width: 100%;
			box-sizing: border-box;
			display: flex;
		}

		th,
		td {
			width: 15%;
		}
	}

	.data-display {
		margin-top: 20rpx;
		width: 100%;
		border-collapse: collapse;
		/* 合并边框 */
	}

	.data-row {
		display: flex;
		flex-wrap: wrap;
		padding: 10rpx 0;
		border-bottom: 1rpx solid #e5e5e5;
		/* 行分隔线 */
		background-color: antiquewhite;
		margin-bottom: 20rpx;
	}

	.data-cell {
		flex: 1;
		min-width: 160rpx;
		/* 最小单元格宽度 */
		padding: 8rpx;
		box-sizing: border-box;

		&:nth-child(n+1) {
			/* 可选：单元格垂直分隔线 */
			/* border-right: 1rpx solid #e5e5e5; */
		}
	}

	.label {
		font-size: 24rpx;
		color: #333;
		font-weight: 500;
		margin-bottom: 5rpx;
		display: block;
		/* 标签单独占一行 */
		text-align: left;
	}

	.input-container {
		width: 100%;
		display: flex;
		align-items: center;
		gap: 5rpx;
		/* 输入框与其他元素间距 */
	}

	.input-container input {
		width: 100%;
		height: 40rpx;
		padding: 0 10rpx;
		border: 1rpx solid #d9d9d9;
		border-radius: 4rpx;
		font-size: 24rpx;

		&[type="checkbox"] {
			width: auto;
			height: 24rpx;
			margin-left: 0;
		}

		&[type="date"] {
			width: 180rpx;
			/* 日期输入框稍宽 */
		}
	}
</style>